<template>
    <div>
        <navbar @onClickLeft="onClickLeft"></navbar>
        <div class="bj-class"></div>
        <div class="content-class">
            <div class="top-img-class" @click="onUploadPictures">
                <img v-if="!form.headPortrait" src="../../assets/iconPersonalData/yx@2x.png" />
                <img v-if="!form.headPortrait" src="../../assets/iconPersonalData/camera@2x.png" />

                <img v-if="form.headPortrait" :src="form.headPortrait" />
                <img v-if="form.headPortrait" src="../../assets/iconPersonalData/camera@2x.png" />
            </div>
            <div>
                <van-form validate-first @submit="submit" ref="form">
                    <!-- 通过 pattern 进行正则校验 -->
                    <van-field label-width="4.2em" :border="true" v-model="form.nickname" name="nickname"
                        placeholder="请输入昵称" :rules="rules.nickname">
                        <template #right-icon>
                            <img @click="empty" v-if="form.nickname" class="img-icon"
                                :src="require('@/assets/iconLogin/input-clear.png')" />
                        </template>
                    </van-field>
                    <div class="input-class input-dxk-class">
                        <div>性别</div>
                        <div>
                            <van-button @click="ongender(1)" round block native-type="button"
                                :color="form.gender == 1 ? 'rgba(54, 98, 236, 0.80)' : 'RGBA(236, 239, 254, 1)'">
                                <div style="display: flex;">
                                    <div>
                                        <img style="width: 20px; height: 20px"
                                            :src="form.gender == 1 ? require('../../assets/iconPersonalData/male-white@2x.png') : require('../../assets/iconPersonalData/male@2x.png')" />
                                    </div>
                                    <div style="margin-left: 7px;" :class="form.gender == 1 ? 'nan-class' : 'mr-class'">男生
                                    </div>
                                </div>
                            </van-button>

                            <van-button @click="ongender(2)" round block native-type="button"
                                :color="form.gender == 2 ? 'rgba(250, 81, 81, 0.80)' : 'RGBA(236, 239, 254, 1)'">
                                <div style="display: flex;align-items: center;">
                                    <div>
                                        <img style="width: 20px; height: 20px"
                                            :src="form.gender == 2 ? require('../../assets/iconPersonalData/famale-white@2x.png') : require('../../assets/iconPersonalData/female@2x.png')" />
                                    </div>
                                    <div style="margin-left: 7px;margin-top: -2px;"
                                        :class="form.gender == 2 ? 'nv-class' : 'mr-class'">女生
                                    </div>
                                </div>
                            </van-button>
                        </div>
                        <div class="tis-class">
                            *性别确认后无法更改，请谨慎选择
                        </div>
                    </div>
                    <div class="input-bd-class">
                        <div>城市</div>
                        <div>
                            <van-field label-width="4.2em" :readonly="true" :border="true" v-model="form.city.name"
                                name="city" placeholder="请选择所在城市" :rules="rules.city.name">
                                <template #button>
                                    <div>
                                        <span @click="getCode">{{ text }}</span>
                                        <!-- <span v-if="countdown" @click="getCode">{{ text }}</span> -->
                                        <!-- <span style="color: rgba(118, 118, 118, 1);font-size: 16px;" v-if="!countdown">{{
                                            count }}s</span> -->
                                    </div>
                                </template>
                            </van-field>
                        </div>
                    </div>
                    <div class="input-bd-class">
                        <div>生日</div>
                        <div>
                            <van-field @click="popupDate" label-width="4.2em" readonly :border="true"
                                v-model="form.birthday" name="birthday" placeholder="请选择你的生日" :rules="rules.birthday">
                                <template #button>
                                    <div>
                                        <van-icon :name="isBirthday ? 'arrow-up' : 'arrow-down'" />
                                    </div>
                                </template>
                            </van-field>
                            <van-popup v-model="isBirthday" @cancel="isBirthday = false" round position="bottom">
                                <van-datetime-picker @cancel="isBirthday = false" :min-date="new Date(1979, 0, 1)"
                                    :maxDate='new Date()' type="date" title="选择生日" :columns-order="['year', 'month', 'day']"
                                    :formatter="formatter" @confirm="onConfirm" />
                            </van-popup>
                            <!-- <van-calendar v-model="isBirthday" @confirm="onConfirm" /> -->
                        </div>
                    </div>
                    <div class="input-bd-class">
                        <div>其他</div>
                        <div class="qit-class">
                            <div>
                                <van-field @click="xitPopupDate(1, '星座')" label-width="4.2em" readonly :border="true"
                                    v-model="form.constellation" name="constellation" placeholder="星座"
                                    :rules="rules.constellation">
                                    <template #button>
                                        <div>
                                            <van-icon :name="isConstellation ? 'arrow-up' : 'arrow-down'" />
                                        </div>
                                    </template>
                                </van-field>
                                <van-field @click="xitPopupDate(2, '职业')" label-width="4.2em" readonly :border="true"
                                    v-model="form.occupation.occupation_name" name="occupation" placeholder="职业" :rules="rules.occupation">
                                    <template #button>
                                        <div>
                                            <van-icon :name="isOccupation ? 'arrow-up' : 'arrow-down'" />
                                        </div>
                                    </template>
                                </van-field>
                            </div>
                            <div>
                                <van-field @click="xitPopupDate(3, '身高')" label-width="4.2em" readonly :border="true"
                                    v-model="form.stature" name="stature" placeholder="身高" :rules="rules.stature">
                                    <template #button>
                                        <div>
                                            <van-icon :name="isStature ? 'arrow-up' : 'arrow-down'" />
                                        </div>
                                    </template>
                                </van-field>
                                <van-field @click="xitPopupDate(4, '体重')" label-width="4.2em" readonly :border="true"
                                    v-model="form.weight" name="weight" placeholder="体重" :rules="rules.weight">
                                    <template #button>
                                        <div>
                                            <van-icon :name="isWeight ? 'arrow-up' : 'arrow-down'" />
                                        </div>
                                    </template>
                                </van-field>
                            </div>
                        </div>
                        <van-popup v-model="showPicker" round position="bottom">
                            <van-picker v-if="elseName==2" :title="pickerTitle" value-key="occupation_name" show-toolbar :columns="columns"
                                @cancel="showPicker = false" @confirm="qinTonConfirm" />
                            <van-picker v-else :title="pickerTitle" show-toolbar :columns="columns" @cancel="showPicker = false"
                                @confirm="qinTonConfirm" />
                        </van-popup>
                    </div>
                    <div class="bottom-bnt">
                        <van-button :disabled="isForm" round block type="info" native-type="submit"
                            color="linear-gradient(180deg, #3764EC 0%, #6B85F7 100%)">确定</van-button>
                    </div>
                </van-form>
            </div>
        </div>
        <!-- 选择头像 -->
        <van-popup v-model="isBuddhaShow" @cancel="isBuddhaShow = false" round position="bottom">
            <div class="BuddhaShow-class">
                <div>
                    <div v-if="isTimePass" class="ti-top-noe-class">请上传本人高清正面靓照</div>
                    <div v-if="isTimePass" class="ti-top-tow-class">五官清晰的照片，会更受欢迎哦～</div>
                    <div class="bjtp-top-class">
                        <van-image width="140" height="140" :src="require('../../assets/iconPersonalData/77@2x.png')" />
                        <van-image v-if="isTimePass" class="gqzl-class" width="56" height="18"
                            :src="require('../../assets/iconPersonalData/98@2x.png')" />
                        <van-image v-if="isTimePass" class="yzdt-class" width="56" height="18"
                            :src="require('../../assets/iconPersonalData/100@2x.png')" />
                        <van-image v-if="isTimePass" class="gxml-class" width="56" height="18"
                            :src="require('../../assets/iconPersonalData/99@2x.png')" />
                        <van-image v-if="!isTimePass" class="sbtp-class" width="32" height="32"
                            :src="require('../../assets/iconPersonalData/warning@2x.png')" />
                    </div>
                    <div v-if="!isTimePass" class="cw-top-noe-class">头像未通过审核</div>
                    <div v-if="!isTimePass" class="cw-top-tow-class">请更换本人头像</div>
                </div>
                <div>
                    <span>—— 不能通过的头像——</span>
                </div>
                <div>
                    <div>
                        <div>
                            <van-image width="75" height="75" :src="require('../../assets/iconPersonalData/79@2x.png')" />
                            <van-image class="jz-class" width="24" height="24"
                                :src="require('../../assets/iconPersonalData/failed@2x.png')" />

                        </div>
                        <div>
                            <span>不露正脸</span>
                        </div>
                    </div>
                    <div>
                        <div>
                            <van-image width="75" height="75" :src="require('../../assets/iconPersonalData/80@2x.png')" />
                            <van-image class="jz-class" width="24" height="24"
                                :src="require('../../assets/iconPersonalData/failed@2x.png')" />
                        </div>
                        <div>
                            <span>不露正脸</span>
                        </div>
                    </div>
                    <div>
                        <div>
                            <van-image width="75" height="75" :src="require('../../assets/iconPersonalData/81@2x.png')" />
                            <van-image class="jz-class" width="24" height="24"
                                :src="require('../../assets/iconPersonalData/failed@2x.png')" />
                        </div>
                        <div>
                            <span>不露正脸</span>
                        </div>
                    </div>
                    <div>
                        <div>
                            <van-image width="75" height="75" :src="require('../../assets/iconPersonalData/82@2x.png')" />
                            <van-image class="jz-class" width="24" height="24"
                                :src="require('../../assets/iconPersonalData/failed@2x.png')" />
                        </div>
                        <div>
                            <span>不露正脸</span>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="bottom-bnt scwdzp-class">
                        <van-uploader :before-read="beforeRead" :max-size="5000 * 1024">
                            <van-button type="primary" round block
                                color="linear-gradient(180deg, #3764EC 0%, #6B85F7 100%)">上传我的照片</van-button>
                        </van-uploader>
                    </div>
                </div>
            </div>
        </van-popup>
        <van-popup v-model="isInterest" @cancel="isInterest = false" round position="bottom">
            <div class="interest-class">
                <div>
                    <div @click="isInterest = false">取消</div>
                    <div>
                        <div>兴趣爱好</div>
                        <div>(3/{{ form.Interest.length }})</div>
                    </div>
                    <div @click="onDefiniteSelection">确定</div>
                </div>
                <div>
                    <div v-for="(item, index) in interestArr" @click="onselectInterest(item)" :key="index">
                        <van-image width="20" height="20"
                            :src="item.isTr ? require('../../assets/iconPersonalData/checkbox-checked@2x.png') : require('../../assets/iconPersonalData/checkbox@2x.png')" />
                        <van-image width="32" height="32" :src="item.isTr ? item.label_no_icon : item.label_icon" />
                        <div>{{ item.label_name }}</div>
                    </div>
                </div>
            </div>
        </van-popup>
        <van-popup v-model="isShow" @cancel="isShow = false" round position="bottom">
            <profilePictureUpload v-if="isShow" :file="file" @beforeReadx="beforeRead" @uploadImgSuccess="uploadImgSuccess"
                @onclose="onclose">
            </profilePictureUpload>
        </van-popup>
    </div>
</template>

<script>
// import {checkMobile} from "@/utils/fun"
import navbar from "@/components/navbar.vue"
import profilePictureUpload from "@/components/profilePictureUpload.vue"
import middleUtils from '@/utils/middleUtil';
import { complete } from '@/api/index'
export default {
    name: "Login",
    components: {
        navbar,
        profilePictureUpload
    },
    data() {
        return {
            isTimePass: true, //上传的头像时候通过
            interestArr: [],
            isInterest: false, //兴趣的底部弹出控制
            isShow: false,
            isBuddhaShow: false,
            elseName: 0,
            pickerTitle: '', //其他选择标题
            isBirthday: false,
            isConstellation: false,
            isOccupation: false,
            isStature: false,
            isWeight: false,
            isForm: true,
            form: {
                headPortrait: '', //头像
                nickname: '', //昵称
                gender: '', //性别
                city: {}, //城市
                birthday: '', //生日
                constellation: '', //星座
                occupation: {}, //职业
                stature: '', //身高
                weight: '',//体重
                Interest: [], //兴趣爱好
            },
            rules: {
                nickname: [
                    {
                        pattern: /^[\u4e00-\u9fa5\w]{3,10}$/,
                        message: "请输入3~10的昵称长度",
                        trigger: "onBlur",
                    },
                ],
                birthday: [
                    {
                        message: "请选择你的生日",
                        trigger: "onBlur",
                    },
                ],
                city: [
                    {
                        message: "请选择你的城市",
                        trigger: "onBlur",
                    },
                ],
                constellation: [
                    {
                        message: "请选择你的星座",
                        trigger: "onBlur",
                    },
                ],
                occupation: [
                    {
                        message: "请选择你的职业",
                        trigger: "onBlur",
                    },
                ],
                stature: [
                    {
                        message: "请选择你的身高",
                        trigger: "onBlur",
                    },
                ],
                weight: [
                    {
                        message: "请选择你的体重",
                        trigger: "onBlur",
                    },
                ]
            },
            countdown: true, //验证码的状态，默认显示发送验证码
            count: "", //60秒倒计时
            timer: null,
            text: "获取定位",
            columns: ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华', '衢州'],
            showPicker: false,
            file: '', //上传的头像
        };
    },
    mounted() {
        let self = this;
        middleUtils.$on('getCity', (city) => {
            self.form.city = city
        })
        this.$store.dispatch("siteConfig/setting", '');
        let interestArr = this.$store.getters['siteConfig/interest_label']
        for (let index = 0; index < interestArr.length; index++) {
            interestArr[index]['isTr'] = false;

        }
        this.interestArr = interestArr
    },
    watch: {
        form: {
            handler(newVal, oldVal) {
                if (Object.values(this.form).some(v => v === '')) {
                    this.isForm = true;
                } else {
                    this.isForm = false;
                }
            },
            // immediate: true,
            deep: true // 可以深度检测到 person 对象的属性值的变化
        }
    },
    methods: {
        onClickLeft() {
            this.$router.push({ path: '/PerfectInformation' })
            console.log("关闭");
        },
        //验证通过
        submit(value) {
            this.isInterest = true;
            console.log(value);
        },
        //清空
        empty() {
            this.form.nickname = ''
        },
        //性别按钮点击
        ongender(value) {
            console.log(value);
            this.form.gender = value;
        },
        //获取定位
        getCode() {
            this.$router.push({ path: '/location' })
            // const TIME_COUNT = 60;
            // if (!this.timer) {
            //     this.count = TIME_COUNT;
            //     this.countdown = false;
            //     this.text = "重新获取";
            //     this.timer = setInterval(() => {
            //         if (this.count > 0 && this.count <= TIME_COUNT) {
            //             this.count--;
            //         } else {
            //             this.countdown = true;
            //             //发送验证码

            //             clearInterval(this.timer);
            //             this.timer = null;
            //         }
            //     }, 1000);
            // }
        },
        //弹出日期选择框
        popupDate() {
            this.isBirthday = true;
        },
        //选择生日
        onConfirm(data) {
            console.log(data);
            this.isBirthday = false;
            this.form.birthday = this.formatDate(data)
        },
        //格式化日期
        formatDate(date) {
            return `${date.getFullYear()}-${(date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)}-${date.getDate() < 10 ? '0' + date.getDate() : date.getDate()}`;
        },
        //其他选择的点击事件
        /*      
            1:星座
            2:职业
            3:身高
            4:体重
        */
        xitPopupDate(value, title) {
            if (value == 1) {
                this.pickerTitle = '选择星座'
                this.columns = [
                    "白羊座",
                    "金牛座",
                    "双子座",
                    "巨蟹座",
                    "狮子座",
                    "处女座",
                    "天秤座",
                    "天蝎座",
                    "射手座",
                    "摩羯座",
                    "水瓶座",
                    "双鱼座"
                ];
            } else if (value == 2) {
                this.pickerTitle = '选择职业'
                this.columns = this.$store.getters['siteConfig/occupation_data']
            } else if (value == 3) {
                this.pickerTitle = '选择身高'
                this.columns = []
                for (let i = 150; i <= 200; i++) {
                    this.columns.push(i + 'cm');
                }
            } else if (value == 4) {
                this.pickerTitle = '选择体重'
                this.columns = []
                for (let i = 40; i <= 120; i++) {
                    this.columns.push(i + 'kg');
                }
            }
            this.elseName = value;
            this.showPicker = true;
        },
        //其他选择器
        /*
            constellation: '', //星座
            occupation: '', //职业
            stature: '', //身高
            weight: '',//体重
        */
        qinTonConfirm(value) {
            if (this.elseName == 1) {
                this.form.constellation = value;
            } else if (this.elseName == 2) {
                this.form.occupation = value;
            } else if (this.elseName == 3) {
                this.form.stature = value.substring(0, value.length - 2);
            } else if (this.elseName == 4) {
                this.form.weight = value.substring(0, value.length - 2);
            }
            this.value = value;
            this.showPicker = false;
        },
        //上传照片
        onUploadPictures() {
            this.isBuddhaShow = true;
        },
        // 上传头像
        beforeRead(file) {
            this.isShow = false;
            if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
                this.$toast('请上传 jpg、png 格式图片');
                return false;
            }
            this.$nextTick(() => {
                this.file = file;
                this.isShow = true;
            })
            return true;
        },
        //关闭
        onclose() {
            this.isShow = false;
        },
        //格式化日期显示
        formatter(type, val) {
            if (type === 'year') {
                return val + '年';
            }
            if (type === 'month') {
                return val + '月';
            }
            if (type === 'day') {
                return val + '日';
            }
            return val;
        },
        //选择兴趣
        onselectInterest(items) {
            console.log(this.form.Interest.indexOf(items.id));
            if (this.form.Interest.indexOf(items.id) !== -1) {
                let indx = this.form.Interest.indexOf(items.id)
                this.form.Interest.splice(indx, 1)
                let index = this.interestArr.findIndex(item => item.id === items.id)
                this.interestArr[index].isTr = false
            } else {
                if (this.form.Interest.length < 3) {
                    let index = this.interestArr.findIndex(item => item.id === items.id)
                    this.interestArr[index].isTr = true
                    this.form.Interest.push(items.id)
                } else {
                    return
                }
            }
        },
        //确定兴趣
        onDefiniteSelection() {
            if (this.form.Interest.length == 0) {
                this.$toast('请选择至少一个兴趣爱好！！');
            } else {
                this.isInterest = false;
                complete({
                    nickname:this.form.nickname,
                    avatar:this.form.headPortrait,
                    birthday:this.form.birthday,
                    city_code:this.form.city.city_code,
                    sex:this.form.gender,
                    constellation:this.form.constellation,
                    weight:this.form.weight,
                    height:this.form.stature,
                    occupation:this.form.occupation.occupation_name,
                    interest_ids:this.form.Interest
                }).then(res=>{
                    //用户注册成功，即可注册环信IM
                    

                    if(res.status==200){
                        this.$toast('填写成功！！');
                        this.$router.push({ path: '/index'})
                    }
                })
            }
        },
        //获取请求成功的头像链接
        uploadImgSuccess(value) {
            this.form.headPortrait = value.url;
            this.isBuddhaShow = false;
            this.isShow = false;
        }
    },
};
</script>

<style scoped lang="scss">
::v-deep .navbar {
    position: absolute !important;
    top: 30px !important;
}

::v-deep .van-nav-bar {
    background-color: #ffffff00 !important;
}


::v-deep .van-nav-bar__content {
    background: #ffffff00 !important;
    background-color: #ffffff00 !important;
}

.bj-class {
    width: 100%;
    height: 148px;
    background: linear-gradient(180deg, #CDE1FD 0%, rgba(255, 255, 255, 0) 100%);
}

.top-img-class {
    width: 100px;
    margin: auto;
    height: auto;
    position: relative;

    &>img:nth-child(1) {
        width: 100px;
        height: 100px;
        border-radius: 50%;
    }

    &>img:nth-child(2) {
        width: 32px;
        height: 32px;
        position: absolute;
        right: 0px;
        bottom: 4px;
    }
}

.content-class {
    margin: -80px 20px 0px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    &>div:nth-child(2) {
        // margin-top: 20px;

        &>div:not(:last-child) {
            margin-top: 20px;
            display: flex;
            background: RGBA(235, 239, 254, 1);
            border-radius: 8px;
            border: 1px solid rgba(82, 117, 241, 0.30);

            &>div:nth-child(1) {}

            &>div:nth-child(2) {
                display: flex;
                flex-direction: column;
                flex: 1;
                justify-content: space-around;
                margin-left: 10px;

                &>div:nth-child(1) {
                    font-size: 16px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #5275F1;
                    margin-top: 10px;
                }

                &>div:nth-child(2) {
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #767676;
                    margin-bottom: 10px;
                }
            }
        }
    }
}

::v-deep .van-cell {
    // padding: 15px 0px !important;
    // background: linear-gradient(180deg, #3764EC 0%, #6B85F7 100%) !important;
    border-radius: 8px !important;
    background: RGBA(236, 239, 254, 1) !important;
    border: 1px solid rgba(82, 117, 241, 0.3) !important;

    &>.van-field__label {
        border-right: 1px solid #d8d8d8 !important;
        font-size: 16px !important;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(118, 118, 118, 1);
        // padding-left: 30px !important;
    }

    &>div:nth-child(2) {
        & .van-field__button {
            // margin-right: 15px !important;
            color: rgba(26, 26, 26, 1) !important;
            font-size: 16px !important;
        }
    }

    // & .van-field__control {
    //     font-size: 16px !important;
    //     font-family: PingFangSC-Regular, PingFang SC !important;
    //     font-weight: 400 !important;
    //     color: #767676 !important;
    //     line-height: 16px !important;
    // }

    &::after {
        display: none !important;
    }

    margin-top: 20px !important;
}

.bottom-bnt {
    margin-top: 40px;
    margin-bottom: 20px;

    ::v-deep .van-button--round {
        border-radius: 8px !important;
    }

    ::v-deep .van-button--normal {
        font-size: 16px !important;
        font-family: PingFangSC-Medium, PingFang SC !important;
        font-weight: 500 !important;
        color: #FFFFFF !important;
    }

    ::v-deep .van-button--disabled {
        background: #D8D8D8 !important;
        border-color: #D8D8D8 !important;

        & .van-button__text {
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: RGBA(118, 118, 118, 1) !important;
            line-height: 16px;
        }
    }

}


.input-class {
    margin-top: 20px;

    &>div:nth-child(1) {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #1A1A1A;
        margin-bottom: 10px;
    }
}

.input-dxk-class {

    ::v-deep .van-button--round {
        border-radius: 8px !important;
    }

    ::v-deep .van-button__text {
        margin-top: 6px !important;
    }

    ::v-deep .van-button--normal {
        font-size: 16px !important;
        font-family: PingFangSC-Medium, PingFang SC !important;
        font-weight: 500 !important;
        color: #FFFFFF !important;
    }

    &>div:nth-child(2) {
        display: flex;
        gap: 10px;

        ::v-deep & .van-button--block {
            height: 60px !important;
        }

        .mr-class {
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #767676;
        }

        .nan-class,
        .nv-class {
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
        }
    }
}

.tis-class {
    margin-top: 10px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #767676;
}

.input-bd-class {
    margin-top: 10px;

    &>div:nth-child(1) {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #1A1A1A;
        margin-bottom: -12px;
    }
}

.qit-class {
    &>div {
        display: flex;
        gap: 10px;
    }
}

::v-deep .van-field__right-icon {
    line-height: 50% !important;
}

.BuddhaShow-class {
    padding: 33px 16px 0px 16px;

    &>div:nth-child(1) {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        & .ti-top-noe-class {
            font-size: 20px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: RGBA(26, 26, 26, 1);
        }

        & .ti-top-tow-class {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #767676;
            margin: 11px 0px 24px 0px;
        }

        & .bjtp-top-class {
            position: relative;

            & .gqzl-class {
                position: absolute;
                top: 18px;
                left: -21px;
            }

            & .yzdt-class {
                position: absolute;
                bottom: 7px;
                left: 0px;
            }

            & .gxml-class {
                position: absolute;
                top: 52px;
                right: -28px;
            }

            & .sbtp-class {
                position: absolute;
                bottom: 7px;
                right: 0px;
            }
        }

        & .cw-top-noe-class {
            font-size: 20px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 600;
            color: #1A1A1A;
            margin-top: 25px;
        }

        & .cw-top-tow-class {
            margin-top: 11px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #767676;

        }
    }

    &>div:nth-child(2) {
        text-align: center;
        margin: 42px 0px 24px 0px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #767676;
    }

    &>div:nth-child(3) {
        display: flex;
        justify-content: space-between;

        &>div {
            position: relative;
            text-align: center;

            & .jz-class {
                position: absolute;
                top: 0px;
                right: 0px;
            }

            &>div:nth-child(2) {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #767676;
                margin-top: 16px;
            }
        }
    }

    &>div:nth-child(4) {
        & .scwdzp-class {
            margin-top: 33px;
            margin-bottom: 20px;

            ::v-deep .van-button--round {
                border-radius: 8px !important;
            }

            ::v-deep .van-button--normal {
                font-size: 16px !important;
                font-family: PingFangSC-Medium, PingFang SC !important;
                font-weight: 500 !important;
                color: #FFFFFF !important;
            }

            ::v-deep .van-button--disabled {
                background: #D8D8D8 !important;
                border-color: #D8D8D8 !important;

                & .van-button__text {
                    font-size: 16px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: RGBA(118, 118, 118, 1) !important;
                    line-height: 16px;
                }
            }

            ::v-deep .van-button {
                height: 48px !important;
            }

            ::v-deep .van-uploader {
                display: block !important;

                & .van-uploader__wrapper {
                    display: block !important;
                }
            }
        }
    }
}

.interest-class {
    &>div:nth-child(1) {
        padding: 24px 15px 0px 15px;
        display: flex;
        justify-content: space-between;

        &>div:nth-child(1) {
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #767676;
        }

        &>div:nth-child(2) {
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #1A1A1A;
            text-align: center;
        }

        &>div:nth-child(3) {
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #000000;
            background-image: linear-gradient(180deg, #3764EC 0%, #6B85F7 100%);
            -webkit-background-clip: text;
            color: transparent;
        }
    }

    &>div:nth-child(2) {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 11px;
        padding: 9px 9px 9px 9px;


        &>div {
            background: #F7F7F7;
            border-radius: 8px;
            // margin-right: 20px;
            margin-bottom: 6px;
            width: calc((100% - 30px) / 3);
            height: 130px;
            border-radius: 8px;
            border: 1px solid #D8D8D8;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;

            &>div:nth-child(1) {
                margin-top: 10px;
            }

            &>div:nth-child(3) {
                margin-bottom: 22px;
            }
        }
    }
}

::v-deep .van-field__control {
    font-size: 16px !important;
    font-family: PingFangSC, PingFang SC !important;
    font-weight: 500 !important;
    color: #1A1A1A !important;
    // -webkit-text-fill-color: none !important;
}
</style>
